<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图表API测试</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .chart-container {
            margin: 20px 0;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
        }
        .status {
            padding: 10px;
            margin: 10px 0;
            border-radius: 4px;
        }
        .success { background-color: #d4edda; color: #155724; }
        .error { background-color: #f8d7da; color: #721c24; }
        .info { background-color: #d1ecf1; color: #0c5460; }
    </style>
</head>
<body>
    <div class="container">
        <h1>工单趋势分析图表测试</h1>
        
        <div id="status"></div>
        
        <div class="chart-container">
            <h3>工单趋势图</h3>
            <canvas id="ticketTrendChart" width="400" height="200"></canvas>
        </div>
        
        <div class="chart-container">
            <h3>工单状态分布图</h3>
            <canvas id="ticketStatusChart" width="400" height="200"></canvas>
        </div>
    </div>

    <script>
        const API_BASE_URL = 'http://localhost:8080/api';
        
        function showStatus(message, type = 'info') {
            const statusDiv = document.getElementById('status');
            statusDiv.innerHTML = `<div class="status ${type}">${message}</div>`;
        }

        async function testChartAPIs() {
            showStatus('正在测试图表API...', 'info');
            
            try {
                // 测试工单趋势API
                const trendResponse = await fetch(`${API_BASE_URL}/statistics/charts/ticket-trend`);
                if (trendResponse.ok) {
                    const trendData = await trendResponse.json();
                    showStatus('工单趋势API测试成功！', 'success');
                    initTrendChart(trendData.data);
                } else {
                    throw new Error(`工单趋势API返回错误: ${trendResponse.status}`);
                }
                
                // 测试工单状态API
                const statusResponse = await fetch(`${API_BASE_URL}/statistics/charts/ticket-status`);
                if (statusResponse.ok) {
                    const statusData = await statusResponse.json();
                    showStatus('工单状态API测试成功！', 'success');
                    initStatusChart(statusData.data);
                } else {
                    throw new Error(`工单状态API返回错误: ${statusResponse.status}`);
                }
                
            } catch (error) {
                showStatus(`API测试失败: ${error.message}`, 'error');
                // 使用模拟数据
                initTrendChartWithMockData();
                initStatusChartWithMockData();
            }
        }

        function initTrendChart(data) {
            const ctx = document.getElementById('ticketTrendChart').getContext('2d');
            new Chart(ctx, {
                type: 'line',
                data: data,
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            position: 'top',
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
        }

        function initStatusChart(data) {
            const ctx = document.getElementById('ticketStatusChart').getContext('2d');
            new Chart(ctx, {
                type: 'doughnut',
                data: data,
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            position: 'bottom',
                        }
                    }
                }
            });
        }

        function initTrendChartWithMockData() {
            const mockData = {
                labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                datasets: [{
                    label: '新建工单',
                    data: [12, 19, 3, 5, 2, 3, 7],
                    borderColor: '#dc3545',
                    backgroundColor: 'rgba(220, 53, 69, 0.1)',
                    tension: 0.4
                }, {
                    label: '已解决工单',
                    data: [8, 15, 5, 8, 3, 5, 9],
                    borderColor: '#28a745',
                    backgroundColor: 'rgba(40, 167, 69, 0.1)',
                    tension: 0.4
                }]
            };
            initTrendChart(mockData);
        }

        function initStatusChartWithMockData() {
            const mockData = {
                labels: ['待处理', '处理中', '已解决', '已关闭'],
                datasets: [{
                    data: [30, 25, 35, 10],
                    backgroundColor: [
                        '#ffc107',
                        '#17a2b8',
                        '#28a745',
                        '#6c757d'
                    ]
                }]
            };
            initStatusChart(mockData);
        }

        // 页面加载完成后开始测试
        document.addEventListener('DOMContentLoaded', testChartAPIs);
    </script>
</body>
</html>
